آموزش طراحی قالب سایت دیجی کالا با Html | Css | Sass | Bootstrap | Jquery به صورت کاملا واکنشگرا جهت ورود به بازار کار + سورس قالب

سرفصل های دوره جامع طراحی سایت دیجی کالا

طراحی قالب سایت یکی از مهارت‌های اساسی در زمینه توسعه وب و دیجیتال مارکتینگ است که بسیاری از افراد به دنبال یادگیری آن هستند. دیجی کالا به عنوان یکی از بزرگترین فروشگاه‌های اینترنتی ایران، از نظر طراحی و ساختار قالب، الگویی مناسب برای بسیاری از طراحان و توسعه دهندگان وب به حساب می‌آید. در این دوره قصد داریم قالب مشابه با قالب سایت دیجی‌‌کالا رو با استفاده از مباحث Html | Css | Sass | BootStrap | Jquery از صفر طراحی کنیم. در این آموزش موارد مهم کامل توضیح داده شده است که باعث می شود از مبتدی تا پیشرفته، همه چیز را از صفر تا صد یاد بگیرید، همچنین در این دوره زبان های طراحی قالب سایت به صورت تخصصی آموزش داده شده است. این دوره برای طیف وسیعی از افراد از جمله دانشجویان، طراحان وب، برنامه‌نویسان و علاقه‌مندان به دنیای وب بسیار مناسب است.

فصل 1 : مقدمات طراحی سایت

در این فصل مباحثی که جلوتر مورد نیاز هستش رو بطور کامل بررسی خواهیم کرد، پس در این فصل به مقدمه ای از مباحث طراحی سایت می پردازیم.

قسمت 1 : ورود به دنیای وب

در این بخش اولین و مهم ترین ابزار مورد نیاز یک طراح سایت رو معرفی و به صورت کلی مورد بررسی قرار میدیم و در ادامه به صورت عملی بررسی می کنیم که اصلا سایت چیه؟ و همچنین با اصطلاحات مرورگر (Web Browser)، وب سایت (Web Site)، کلمه کلیدی (Keyword)، باکس جستجو (Search Box)، SERP و اتصال (Link) در طول آموزش آشنا می شوید.

قسمت 2 : معرفی بخش های مختلف نتایج جستجو گوگل

احتمالا قبل از دیدن این بخش، زمانی که عبارتی رو در گوگل جستجو می کردید به جزئیات نتایج جستجو در گوگل دقت نمی کردید و اما بعد از دیدن این بخش با انواع بخش های مختلف نتایج جستجو بیشتر آشنا می شوید و مطمئن باشید در روند یادگیری مباحث مختلف طراحی سایت، اصطلاحاتی که در این بخش یاد می گیرید خیلی کمکتون می کنه و با دید تخصصی تری به بخش های مختلف نتایج جستجو گوگل نگاه می کنید و اما اصطلاحاتی که در این بخش یاد می گیرید شامل :

name of the website _ favicon of the website _ breadcrumb _ page title _ rich snippets _ release or update date _ meta description _ matches _ image of the result _ star rating _ product price _ links related _ organic _ sponsored _ local pack _ featured snippets _ top stories _ images _ people also ask _ knowledge panel _ site links _ twitter_ related searches _ video _ video carousel _ apps _ google flights _ jobs _ recipes _ shopping results

قسمت 3 : دیتاسنتر ، سرور ، رک چیست؟

بعد از این که به صورت عملی در جلسات گذشته درک کردید که سایت چیه؟ احتمالا این سوال براتون پیش اومده که بگید این اطلاعات سایت ها در کجا ذخیره و نگهداری میشن؟ برای این که جواب این سوالتون رو بدم در این بخش شما رو با 3 اصطلاح دیتاسنتر (Data Center) ، سرور (Server) و رک (Rack) آشنا میکنم.

قسمت 4 : آیپی و وب سرور چیست؟

در این بخش ابتدا مفهموم آیپی رو درک می کنید و متوجه میشد که هر دستگاه دیجیتالی به منظور ایجاد ارتباط با اینترنت حتما باید آدرس آیپی داشته باشه که این آدرس آیپی یه آدرس عددی هستش که مشخص کننده یک کامپیوتر یا دستگاهی در شبکه هست که از طریق این آدرس می تونن با هم ارتباط برقرار کنن و زبان یکدیگر رو متوجه بشن بعدش با مفهوم وب سرور آشنا میشید که این وب سرور نرم افزاری هستش که روی سرور نصب میشه و وظیفه هندل کردن، پردازش و پاسخ دادن به درخواست هایی است که مرورگر به سمت سرور میفرسه رو داره.

قسمت 5: DNS چیست؟ و چگونه مرورگر IP متناظر با دامنه جستجو شده رو پیدا میکنه؟

در این بخش ابتدا مفهوم DNS رو درک می کنید و متوجه میشید که DNS به منظور ایجاد شکاف ارتباطی بین کامپیوترها و انسان ها و برقراری ارتباط آسان تر توسعه داده شده و در واقع وظیفه اصلی DNS اتصال دامنه به آیپی هستش بجای اینکه بخواهیم IP را تایپ کنیم آدرس نام دامنه را تایپ می کنیم و در آخر بطور کامل درک می کنید که چگونه مرورگر IP متناظر با دامنه جستجو شده رو پیدا میکنه و همچنین با اصطلاحات زیر در طول آموزش آشنا خواهید شد:

ISP _ Resolving name server _ Root name server _ TLD name server _ Authoritative name server

قسمت 6: URL و دامنه از چه قسمت هایی تشکیل شده اند؟

URL دارای بخش های مختلفی هستش که یکی از بخش هایش دامنه می باشد که در این بخش تک تک قسمت های یک URL که شامل پروتکل ارتباطی،زیر دامنه، دامنه سطح دوم، دامنه سطح بالا و شاخه و مسیرهای داخلی رو تک به تک مورد بررسی قرار می دهیم و همچنین در این بخش با اصطلاحات زیر آشنا می شوید:

Protocol HTTP & HTTPS _ SSL _ Sub Domain _ SLD _ TLD _ Sub Directory _ Query String _ sTLS _ gTLD _ ccTLD

قسمت 12: معرفی مهم ترین قسمت های مختلف سایت

آشنایی با بخش های مهم سایت میتونه در روند کاری و یادگیریتون خیلی کمکتون کنه پس بر این منظور در این بخش به معرفی مهم ترین قسمت های مختلف سایت می پردازیم و همچنین با اصطلاحات زیر آشنا می شوید:

Arrow _ Ribbon _ Favicon _ Drag & Drop _ popup _ Breadcrumb _ Field _ Logo _ Sidebar _ Skleton Loader _ Action Sheets _ Notification _ Snack bars _ Customer Reviews _Charts _ Chips _ Range Slider _ Divider _ Border _ Shadow _ Toggle Button _ Sub Menu _ Mega Menu _ Post Thumbnail _ Scroll bar _ Related Post _ Sticky Header & Sidebar _ Category _ Search box _ Footer _ header _ Content _ body _ Comment _ Avatar _ Login _register _ User Profile _ Tab _ Countdown _ Slider _ Accordion _ Form _ Label _ Input _ Check and Radio _ Menu _ Dark Mode _ Toast _ Popover _ Tooltip _ Modal _ Carousel _ Navigation bar _ Dropdown _ Pagination _ Spinner _ Progress bar _ Button _ Alert _ Tabel

قسمت 13: کامپایلر (Compiler) چیست و چگونه کار میکند؟

در این جلسه ابتدا بررسی میکنیم که یک برنامه نویس برای یادگیری و درک بهتر هر زبان برنامه نویسی باید با نوع زبان ( اینکه زبان برنامه نویسی مد نظرش سطح بالاست یا سطح پایین ) آشنایی داشته باشه پس زبان های سطح بالا و سطح پایین رو مورد بررسی قرار میدیم و در ادامه تعریف کامپایلر ، انواع مختلف کامپایلر ، مراحل کار کامپایلر رو مورد بررسی قرار میدهیم و همچنین با اصطلاحات زیر آشنا میشوید:

Compiler _ AOT _ JIT _ Scanning _ Lexical _ Syntactic _ Semantic

قسمت 14: از معرفی تا نصب کد ادیتور (Code Editor)

در این جلسه ابتدا به صورت عملی یکی از اصلی ترین تفاوت بین یک کد ادیتور ساده با یک ویرایشگر کد حرفه ای رو لمسش می کنید و در ادامه با توجه به نیاز آموزش و کاریمون لازم میشه که از یک ادیتور حرفه ای استفاده کنیم بر این منظور انواع مختلف ویرایشگرهای کد رو معرفی میکنم و همچنین متوجه می شوید که IDE و Text Editor چیه؟ و بعد از آشنایی با انواع مختلف کد ادیتور، یدونه خوبشو با توجه به نیاز کاریمون انتخاب می کنیم و مراحل نصب رو با هم دیگه طی می کنیم.

فصل 8 : تدوین و پیاده سازی مینی پروژه های کاربردی طراحی سایت

مینی پروژه 1: چگونه نوار آیکون افقی و عمودی بسازم ؟

یه نوار آیکون افقی و عمودی درست کن که کلا 5 تا آیکون باشه و این آیکون ها رو هم ( خانه _ جستجو _ ایمیل _ کره زمین _ سطل آشغال ) قرار بده و دارای فاصله مناسب بینشون باشه و آیکون خانه بصورت آکتیو باشه و رنگ پس زمینه اش سبز باشه و زمانی که کاربر موس اش رو روی هر کدوم از این آیکون ها برد پس زمینه اش مشکی بشه و با یک ترنزیشنی رنگ پس زمینه نمایش داده بشه.

مینی پروژه 2: چگونه یک آیکون منو (منو همبرگری) بسازم؟

یه آیکون منو یا همون منو همبرگری درست کن که دارای سه خط موازی روی هم دیگه با یه فاصله مشخص قرار گرفته باشن و رنگ خط اول زرد ، خط دوم مشکی ، خط سوم آبی باشه و زمانی که روی این منو همبرگری کلیک شد به شکل ضربدر در بیاد و وقتی روی ضبدر کلیک شد به همون حالت اول (سه خط موازی) در بیاد.

مینی پروژه 8: چگونه تغییر تب‌ها هنگام قرار گرفتن ماوس روی آن‌ها با استفاده از CSS و JavaScript رو ایجاد کنم؟

فضایی برای تب به صورت عمودی ایجاد کن و تعدادی آیتم برای تب قرار بده ، و در حالت اول هیچ محتوایی از تب ها نمایش داده نشود، زمانی که کاربر ماوس اش رو بر روی هر کدوم از تب ها برد محتوای مربوط به هر تب نمایش داده بشه.

مینی پروژه 9: چگونه منو ناوبری واکنش گرا با CSS و جاوا اسکریپت ایجاد کنم؟

ابتدا یک فضایی برای منوی ناوبری ایجاد کن و داخلش یک تعداد آیتم برای منو قرار بده (این منوی ناوبری به دیواره بالایی کاملا چسبیده باشه) حالا زمانی که عرض دستگاه کوچکتر از 600px شد آیکون مربوط به منوی موبایلی نمایش داده بشه و زمانی که کاربر بر روی آیکون کلیک کرد بتونه به صورت کشویی آیتم های مربوط به منو رو ببینه.

مینی پروژه 10: چگونه با جاوا اسکریپت یک منوی جستجو برای فیلتر کردن لینک ها ایجاد کنم؟

یک تعداد آیتم و یک فضایی ایجاد کن که کاربر بتونه عبارت مورد نظرشو جستجو کنه و برنامه رو طوری پیاده سازی کن که وقتی کاربر عبارتی رو داخل فضای مربوط وارد کرد اگر داخل اون آیتم ها عبارت جستجو شده وجود داشت نمایش داده بشه و اگر وجود نداشت تمامی آیتم ها نمایش داده نشوند، این پروژه طوری پیاده سازی بشه که به بزرگی و کوچکی حروف حساس نباشه.

مینی پروژه 11: چگونه یک منوی ناوبری واکنشگرا به همراه باکس جستجو ایجاد کنم؟

ابتدا یک فضایی برای منوی ناوبری ایجاد کن و داخلش یک تعداد آیتم برای منو و در سمت چپ این منو فضایی برای باکس جستجو قرار بده (این منوی ناوبری به دیواره بالایی کاملا چسبیده باشه) حالا زمانی که عرض دستگاه کوچکتر از 600px شد تمامی آیتم ها و باکس جستجو صد در صد عرض والدشون رو در بر بگیرن.

مینی پروژه 12: چگونه یک منوی ناوبری کناری ثابت با CSS ایجاد کنم؟

یک نوار کناری به صورت fixed شده ایجاد کن و داخل این نوار کناری یک تعداد آیتم های منو که به صورت لینک شده باشن رو قرار بده و در کنار این نوار کناری فضایی برای محتوا قرار بده و زمانی که کاربر اسکرول کرد این نوار کناری به صورت fixed شده باشه.

مینی پروژه 13: چگونه منوی کناری با قابلیت باز و بسته شدن به صورت انیمیشنی رو ایجاد کنم؟

فضایی برای آیکون منوی موبایلی ایجاد کن و زمانی که کاربر بر روی این آیکون کلیک کرد یک منوی ناوبری از سمت چپ صفحه ظاهر بشه و داخل این منو یک تعداد آیتم وجود داشته باشه و زمانی که رو آیکون ضربدر کلیک کرد اون منوی کناری با یک ترنزیشنی مخفی بشه.

مینی پروژه 14: چگونه یک منوی ناوبری کناری واکنش گرا با CSS ایجاد کنم؟

یک نوار کناری به صورت fixed شده ایجاد کن و داخل این نوار کناری یک تعداد آیتم های منو که به صورت لینک شده باشن رو قرار بده و زمانی که کاربر ماوس اش رو بر روی هر کدوم از آیتم ها برد رنگ پس زمینه اش تغییر پیدا کنه و در کنار این نوار کناری فضایی برای محتوا قرار بده و زمانی که کاربر اسکرول کرد این نوار کناری به صورت fixed شده باشه و زمانی که عرض دستگاه کوچکتر از 700px شد ، نوار کناری موقعیتش تغییر پیدا کنه و به قسمت فوقانی صفحه منتقل پیدا کنه و زمانی که عرض دستگاه کوچکتر از 400px شد هر کدوم از آیتم های منو 100% عرض رو در بر بگیره.

مینی پروژه 15: چگونه منوی ناوبری پوششی تمام صفحه با قابلیت باز و بسته شدن ایجاد کنم؟

فضایی برای آیکون منوی موبایلی ایجاد کن و زمانی که کاربر بر روی این آیکون کلیک کرد یک منوی ناوبری پوششی تمام صفحه ظاهر بشه و داخل این منو یک تعداد آیتم زیر هم دیگه در وسط وجود داشته باشه و زمانی که رو آیکون ضربدر کلیک کرد اون منوی پوششی تمام صفحه با یک ترنزیشنی ارتفاعش به صفر برسد در کل مخفی بشه.

مینی پروژه 16: چگونه دکمه‌های ناوبری کناری با قابلیت شناور شدن با CSS ایجاد کنم؟

4 تا دکمه به صورت لینک شده ایجاد کن با رنگ های متفاوت و این دکمه ها به دیواره سمت چپ پنجره مرورگر چسبیده باشن و طوری باشه که به داخل رفته باشن و زمانی که کاربر بر روی نیمه ای از بخش نمایش داده شده موس اش رو برد کل دکمه نمایش داده بشه و این نمایش داده شدن با یک ترنزیشنی انجام بشه.

مینی پروژه 17: چگونه یک منو قابل پیمایش افقی با CSS ایجاد کنم؟

یک تعداد فضا برای آیتم های منو ایجاد کن که به صورت لینک شده باشن و این آیتم ها در کنار هم دیگه با یک فاصله مشخصی قرار داشته باشن و فضای کلی در برگیرنده آیتم های منو در راستای افق اسکرول داشته باشه.

مینی پروژه 18: چگونه لینک‌های ناوبری با خط زیرین (underline) با CSS ایجاد کنم؟

یک Navigation menu ایجاد کن که داخلش تعدادی آیتم وجود داشته باشه و زمانی که کاربر موس اش رو بر روی هر آیتم می برد یک خطی زیر اون آیتم کشیده بشه.

مینی پروژه 19: چگونه یک نوار ناوبری با عرض برابر ایجاد کنم؟

یک Navigation menu ایجاد کن که داخلش 4 آیتم با عرض های یکسان وجود داشته باشه و زمانی که عرض دستگاه کوچکتر از 500px شد هر کدام از این آیتم ها صد در صد والدشون رو در بر بگیره.

مینی پروژه 20: چگونه یک منو ناوبری ثابت با CSS ایجاد کنم؟

یک Navigation menu ایجاد کن که صد در صد عرض دستگاه رو در بر بگیره که داخلش یکسری آیتم های مربوط به منو باشه و این منوی ناوبری کاملا به صورت ثابت باشه.

مینی پروژه 21: چگونه نوار ناوبری کشویی هنگام اسکرول با CSS و JavaScript ایجاد کنم؟

منوی ناوبری ایجاد کن که دارای تعدادی آیتم باشه و در ابتدا وقتی صفحه لود میشه منو مخفی باشه و اما زمانی که کاربر به سمت پایین اسکرول کرد منو نمایش داده بشه که با بالا و پایین کردن اسکرول منو نمایش و مخفی بشه در واقع منوی ناوبری حالت کشویی پیدا کنه.

مینی پروژه 22: چگونه مخفی کردن منوی ناوبری با اسکرول به پایین با استفاده از CSS و جاوااسکریپت ایجاد کنم؟

منوی ناوبری ایجاد کن که دارای تعدادی آیتم باشه و در ابتدا وقتی صفحه لود میشه منو نمایش داده بشه و اما زمانی که کاربر به سمت پایین اسکرول کرد منو مخفی بشه که با بالا و پایین کردن اسکرول، منو نمایش/مخفی بشه.

مینی پروژه 23: چگونه با استفاده از CSS و جاوااسکریپت اندازه منوی ناوبری رو با اسکرول کردن تغییر دهم؟

منوی ناوبری ایجاد کن که به دیواره بالایی کاملا چسبیده باشه و این منو دارای تعدادی آیتم و فضایی برای لوگو باشه طرح رو طوری پیاده سازی کن که وقتی کاربر اسکرول رو بالا و پایین کرد محتویات داخل منو بزرگ و کوچک بشه در واقع اندازه اش تغییر پیدا کنه.

مینی پروژه 24: چگونه منوی ناوبری چسبنده رو با CSS ایجاد کنم؟

منوی ناوبری ایجاد کن که این منو دارای تعدادی آیتم باشه و این منو از دیواره بالایی صفحه فاصله داشته باشه حال زمانی که کاربر اسکرول کرد این منوی ناوبری وقتی به دیواره بالایی صفحه رسید تا زمانی که اسکرول به انتهای صفحه میرسه به صورت چسبنده باشه.

مینی پروژه 25: چگونه منو کشویی قابل کلیک با CSS و جاوا اسکریپت ایجاد کنم؟

منوی ناوبری ایجاد کن که به دیواره بالایی کاملا چسبیده باشه و تعدادی آیتم داخل این منوی ناوبری قرار بده و یکی از این آیتم ها دارای زیر منو (منوی کشویی) باشه که با کلیک بر روی آیتمی که دارای زیر منو هستش اون منوی کشویی نمایش/مخفی بشه و این قابلیت رو هم پیاده سازی کن که وقتی زیر منو نمایش داده میشه کاربر وقتی بر روی صفحه کلیک کرد اون منوی کشویی مخفی بشه.

مینی پروژه 40: چگونه با استفاده از CSS یک گالری تصویر با نوار اسکرول افقی ایجاد کنم؟

چهار فضا مربوط به تصویر ایجاد کن و طوری این تصاویر رو در کنار هم دیگه قرار بده که در راستای افق قرار بگیرن و زمانی که تصاویر از عرض صفحه خارج شد ، اسکرول در راستای افق بگیره.

مینی پروژه 45: چگونه روی تصویر، عنوانی را هنگام قرار گرفتن اشاره گر موس ایجاد کنم؟

فضایی برای تصویر ایجاد کن که وقتی موس بر روی تصویر رفت عنوانی با پس زمینه ای ظاهر بشه.

مینی پروژه 46: چگونه متن رو در موقعیت های مختلف تصویر قرار دهم؟

یک فضایی برای تصویر ایجاد کن که این تصویر صد در صد عرض والدش رو در بر بگیره و 5 تا عبارت کوتاه متنی ایجاد کن که به عنوان خواهر و برادر این تصویر باشن و هر کدوم از این عبارت متنی رو در یه گوشه ای از تصویر قرار بده مثلا : بالا سمت راست ، بالا سمت چپ ، پایین سمت راست ، پایین سمت چپ و وسط قرار بده.

مینی پروژه 47: چگونه با CSS یک تصویر پس‌زمینه تار (بلور) ایجاد کنم؟

یک تصویری رو در پس زمینه قرار بده که این تصویر کامل عرض و ارتفاع View Port رو در بر بگیره و بعدش این عکس رو بلور کن و روی عکس یک باکس مستطیل شکلی قرار بده که داخل این باکس هم عنوان وجود داشته باشه و هم فضایی برای پاراگراف و همچنین این باکس مستطیل شکل به صورت شفاف باشه.

مینی پروژه 48: چگونه آیتم هایی برای معرفی اعضای تیم بسازم؟

سه آیتم برای معرفی اعضای تیم ایجاد کن، که فضای مربوط به آیتم شامل تصویر ، نام ، عنوان شغلی ، سخنی از عضو تیم ایمیل و دکمه مشاهده نمونه کار باشه و این سه تا آیتم کنار هم دیگه قرار بگیرن و وقتی عرض دستگاه کوچکتر از 650px شد هر کدوم از آیتم ها صد در صد عرض دستگاه رو در بر بگیرن.

مینی پروژه 49: چگونه یک تصویر چسبنده موقع اسکرول کردن بسازم؟

طرحی رو ایجاد کن که از دو ستون تشکیل شده باشه که ستون سمت چپ متنی باشه و ستون سمت راست تصویر باشه و زمانی که کاربر اسکرول کرد تصویر از یک جا به بعد به صورت چسبان دربیاد .

مینی پروژه 50: چگونه یک تصویر رو به لرزش در بیارم؟

یک فضایی برای تصویر ایجاد کن، و طرح رو جوری پیاده سازی کن که وقتی کاربر موس اش رو بر روی تصویر برد تصویر به لرزش در بیاید و زمانی که موس از روی تصویر برداشته شد اون تکان خوردن متوقف شود.

مینی پروژه 72: چگونه با استفاده از CSS و جاوا اسکریپت، اسلایدر سفارشی رنج (محدوده) ایجاد کنم؟

یک input ای با تایپ range ایجاد کن و با استفاده از CSS سفارشی سازی اش کن جوری که عرض input صد در صد عرض صفحه رو در بر بگیره و رنگ پس زمینه این input رو تغییر بده و دستگیره هایی که برای جابجایی اسلایدر وجود داره رو دایره ای شکل اش کن و در حالت اول مقدار این input روی 50 باشه و با تغییر این اسلایدر مقدار گرفته بشه و در داخل یک تگ span ای نمایش داده بشه.

مینی پروژه 73: چگونه با استفاده از CSS،(ابزار راهنما) Tooltip ایجاد کنم؟

یک Tooltip یا همون ابزار راهنما ایجاد کن که وقتی کاربر موس اش رو بر روی عبارتی برد، یک باکس مستطیلی بالای متن ظاهر بشه و عبارتی داخل اون باکس مستطیلی نمایش داده بشه و زمانی که موس از روی عبارت متنی برداشته شد اون Tooltip مخفی بشه.

مینی پروژه 74: چگونه با استفاده از CSS یک پیش‌بارگذار (Preloader) ایجاد کنم؟

یک پیش بارگذار یا همون لودینگ دایره شکلی ایجاد کن که به صورت 360 درجه در حال چرخش باشه و بعد از مدت زمان 3 ثانیه این loader مخفی بشه و بعدش یک عبارت متنی ای از پایین به بالای صفحه به صورت انیمیشی ظاهر بشه.

مینی پروژه 76: چگونه یه متن شفاف که انگار از روی یه تصویر پس‌زمینه برش خورده و روی اون قرار گرفته رو ایجاد کنم؟

یک فضایی برای تصویر مشخص کن و بر روی تصویر عبارت متنی ای رو در وسط قرار بده و متن طوری بشه که شفافه و انگار از روی یه تصویر برش خورده و روی اون قرار گرفته باشه.

مینی پروژه 82: چگونه با استفاده از CSS و جاوا اسکریپت حالت دارک مود رو ایجاد کنم؟

یه فضایی برای عنوان ، عبارت متنی و دکمه مشخص کن و طوری باشه که وقتی کاربر بر روی دکمه کلیک کرد امکان تغییر حالت روشن به تاریک و برعکس فراهم باشه در کل با کلیک کردن روی دکمه کلاسی به تگ body اضافه بشه و در صورت موجود بودن حذف بشه و اون کلاسی که اضافه میشه دارای یکسری استایل هایی باشه.

مینی پروژه 83: چگونه با استفاده از CSS اشکال مختلف هندسی رو ایجاد کنم؟

اشکال هندسی مثلث سمت (بالا، پایین، راست، چپ)، متوازی الاضلاع، مستطیل، ذوزنقه، بیضی، دایره و مربع رو ایجاد کن و این اشکال هندسی در وسط صفحه و زیر هم دیگه با یک فاصله مشخصی قرار داشته باشن.

مینی پروژه 86: چگونه با استفاده از فونت آیکون‌ها جلوه‌های متحرک ایجاد کنم؟

با استفاده از فونت آیکون های مربوط به مرحله به مرحله شارژ شدن باطری، انیمیشنی رو ایجاد کن که انگار در حال شارژ شدن می باشد در واقع شارژ شدن یک باتری رو شبیه‌سازی کن.

مینی پروژه 87:چگونه با استفاده از جاوااسکریپت یک تایمر شمارش معکوس بسازم؟

مینی پروژه 88: چگونه افکت تایپ خودکار متن با استفاده از جاوا اسکریپت رو ایجاد کنم؟

یک دکمه و یک فضا برای عبارت متنی ای ایجاد کن و با استفاده از جاوا اسکریپت کاری کن که وقتی کاربر بر روی دکمه کلیک کرد یه عبارتی متنی ای به صورت خودکار (کارکتر به کارکتر) داخل اون فضای مشخص شده با یک افکتی تایپ بشه.

مینی پروژه 89:چگونه یک نمای لیست شبکه‌ای (یا شبکه‌ای لیستی) ایجاد کنم؟

مینی پروژه 90:چگونه با HTML و جاوااسکریپت یک مبدل واحد وزن بسازم؟